<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel class :interval="4000" type="card">
      <el-carousel-item v-for="item in lbt" :key="item.key">
        <img src="../assets/banner.jpg" alt />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">推荐歌单</h3>
      <div class="items">
        <div
          class="item"
          v-for="item in recommendlist"
          :key="item.key"
          @click="toplaylist(item.id)"
        >
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{item.copywriter}}</span>
            </div>
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play"></span>
          </div>
          <p class="name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">最新音乐</h3>
      <div class="items">
        <div class="item" v-for="item in newsong" :key="item.key">
          <div class="img-wrap">
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play" @click="play(item.id)"></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{item.name}}</div>
            <div class="singer">{{item.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="item in mvlist" :key="item.key" @click="mvplay(item.id)">
          <div class="img-wrap">
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "discovery",
  data() {
    return {
      lbt: [],
      recommendlist: [],
      newsong: [],
      songurl: "",
      mvlist: []
    };
  },
  created() {
    axios({
      url: "https://autumnfish.cn/banner"
    }).then(res => {
      this.lbt = res.data.banners;
    }),
      axios({
        url: "https://autumnfish.cn/personalized",
        params: {
          limit: 10
        }
      }).then(res => {
        this.recommendlist = res.data.result;
      }),
      axios({
        url: "https://autumnfish.cn/personalized/newsong"
      }).then(res => {
        this.newsong = res.data.result;
        // console.log(this.newsong);
      }),
      axios({
        url: "https://autumnfish.cn/personalized/mv"
      }).then(res => {
        this.mvlist = res.data.result;
        console.log(this.mvlist);
      });
  },
  methods: {
    play(id) {
      console.log(id);
      axios({
        url: "https://autumnfish.cn/song/url",
        params: {
          id
        }
      }).then(res => {
        let url = res.data.data[0].url;
        this.$parent.songurl = url;
      });
    },
    toplaylist(id) {
      console.log(id);
      this.$router.push("/playlist?q=" + id);
    },
    mvplay(id) {
      console.log(id);
      this.$router.push("/mv?q=" + id);
    }
  }
};
</script>

<style >
</style>
